<template>
	<view class="borr">
		<image src="/static/images/chengong.jpg" class="bor-img"></image>
		<view style="text-align: left;width: 200px;margin: 0 auto;color: #999999;font-size: 15px;">交押金您可：</view>
		<view class="borr-wrapper">
			<view>
				<image src="/static/images/chengong.jpg" class="w-img"></image>
				<text class="borr-text">可在社区图书馆借阅图书</text>
			</view>
			<view>
				<image src="/static/images/chengong.jpg" class="w-img"></image>
				<text class="borr-text">开通会员即可借阅</text>
			</view>
			<view>
				<image src="/static/images/chengong.jpg" class="w-img"></image>
				<text class="borr-text">无需收据可一键退还押金</text>
			</view>
		</view>

		
		
		<view class="b-wra-but" @click="hanldYj()" v-if="deposit>0&&level===2||level===3">
			<view class="borr-but">打开小程序</view>
		</view>
		
		<view class="b-wra-but" v-else-if="level===0||level===1" @click="hanldKaitongka()">
			<view class="borr-but">请先开通会员</view>
		</view>
		
		<view class="b-wra-but" @click="hanldPaly()" v-if="deposit==0">
			<view class="borr-but">交押金</view>
		</view>
		
		
		<!--授权弹框-->
		<view class="search-body">
			<view class="dialog-container" v-if="tokenShow">
				<view class="dialog-mask"></view>
				<view class="dialog-info">
					<view class="dialog-title">您还未授权</view>
					<view class="dialog-content">请先授权再进行操作</view>
					<view class="dialog-footer">
						<button @click="dontLogin()" class="dialog-btn">暂不登录</button>
						<button @getuserinfo="getLogin" open-type="getUserInfo" class="dialog-btn" style="background-color:#FF5F49;color: #fff;">立即授权</button>
					</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				deposit:0,//押金
				token:"",
				tokenShow:"",
				level:Number//等级
			}
		},
		onShow(){
			this.token = uni.getStorageSync('accessToken')
			this.initData();
		},
		methods: {
			hanldYj(){
				wx.navigateToMiniProgram({
				  appId: 'wxa380479dc6a19d1e',
				  
				  success(res) {
				    // 打开成功
					console.log('打开微信小程序');
					console.log(res)
				  }
				})
			},
			dontLogin(){
				this.tokenShow = false
			},
			//开通会员卡
			hanldKaitongka(){
				uni.switchTab({
					url:'/pages/user/user'
				})
			},
			//微信支付
			hanldPaly() {
				this.token = uni.getStorageSync('accessToken')
				if (this.token == '') {
					this.tokenShow = true;
				}
				if (this.token) {
					uni.showLoading({
					    title: '加载中'
					});
					let that = this;
						const formData = {
						  type: 1
						}
						this.$http.post('/wechat/wxPay', formData).then((response) => {
							const res = response.data;
							if(res.code==0){
								wx.requestPayment({
								  timeStamp: res.data.timeStamp,
								  nonceStr: res.data.nonceStr,
								  package: res.data.package,
								  signType: "MD5",
								  paySign: res.data.paySign,
								  success(res) {
									uni.showToast({title: res.msg, icon: 'none'});
									that.initData()
								    console.log(res + "支付接口");
								  },
								  fail(res) {
								   uni.showToast({title: res.msg, icon: 'none'});
								  }
								});
							}
							uni.showToast({title: res.msg, icon: 'none'});
							 uni.hideLoading();
						})
				}
				},
				//获取用户信息
				initData() {
					this.$http.get('/user/info').then((response) => {
						const res = response.data;
						if (res.code == 0) {
							this.deposit = res.data.deposit;
							this.level = res.data.level;
							console.log(this.deposit+'deposit')
						}
					})
				},
				//授权
				getLogin() {
					var that = this;
					wx.login({
						//获取code 使用wx.login得到的登陆凭证，用于换取openid==token代替
						success(res) {
							if (res.code) {
								console.log(res.code);
								that.code = res.code;
								//使用 wx.getSetting 获取用户当前的授权状态。
								wx.getSetting({
									success(res) {
										if (res.authSetting['scope.userInfo']) { //已授权=>getUserInfo
											wx.getUserInfo({
												success(res) {
													console.log(res)
													console.log("ressss")
													console.log(that.userinfo)
													
													const formData = {
														code: that.code,
														avatar:res.userInfo.avatarUrl,
														nickname:res.userInfo.nickName
													}
													that.$http.post('/login/wxLogin', formData).then((response) => {
														const res = response.data;
														console.log(res.data.token);
														if(res.data.token){
															that.$http.setConfig((config) => { /* 设置全局配置 */
															  config.header = {
															    ...config.header,
															    token: res.data.token,
															  }
															  return config
															})
															wx.setStorageSync("accessToken", res.data.token); //成功之后存入token
														}
														that.initData()
														that.tokenShow = false;
														uni.showToast({title: res.msg, icon: 'none'});
													})
												},
												fail(err) {
													console.log(err)
												}
											})
										}
									}
								})
							} else {
								console.log("登录失败！" + res.errMsg);
							}
						}
					});
				}
		}
	}
</script>

<style scoped>
.borr{
	width: 100%;
	min-height: 100%;
	background-color: #FFFFFF;
	text-align: center;
}
.bor-img{
	width: 76px;
	height: 76px;
	margin-top: 200upx;
}
.w-img{
	width: 15px;
	height: 15px;
	vertical-align:middle;
}
.borr-text{
	padding: 0 10px;
	font-size: 15px;
}
.borr-wrapper{
	display: flex;
	flex-direction: column;
	text-align: left;
	margin: 0 auto;
	    width: 200px;
}
	
.b-wra-but{
	position: fixed;
	    width: 100%;
	  /*  #ifdef H5  */
	  bottom: 200px;
	  /*  #endif  */
	  
	  
	  /*  #ifdef MP-WEIXIN  */
	  bottom: 100px;
	  /*  #endif  */
}
.borr-but{
	margin: 0 15px;
	height:44px;
	background:rgba(255,95,73,1);
	border-radius:3px;
	font-size: 17px;
	color: #fff;
	line-height: 44px;
}

/*授权*/
	.dialog-mask {
		position: fixed;
		z-index: 1000;
		top: 0;
		right: 0;
		left: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.3);
	}
	
	.dialog-info {
		position: fixed;
		z-index: 5000;
		width: 80%;
		max-width: 600rpx;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
		background-color: #ffffff;
		text-align: center;
		overflow: hidden;
	}
	
	.dialog-title {
		font-size: 36rpx;
		padding: 30rpx 30rpx 10rpx;
	}
	
	.dialog-content {
		padding: 10rpx 30rpx 20rpx;
		min-height: 80rpx;
		font-size: 32rpx;
		line-height: 1.3;
		word-wrap: break-word;
		word-break: break-all;
		color: #999999;
	}
	
	.dialog-footer {
		display: flex;
		align-items: center;
		position: relative;
		line-height: 90rpx;
		font-size: 34rpx;
	}
	
	.dialog-btn {
		display: block;
		-webkit-flex: 1;
		flex: 1;
		position: relative;
		font-size: 16px;
	}
	
	button {
		background-color: #fff;
		border-radius: 0;
	}
	
	button::after {
		border-radius: 0;
	}
</style>
